const {resolve,join} = require('path');
//引用插件 该插件下载命令为：npm i html-webpack-plugin -D
const HtmlWebpackPlugin = require('html-webpack-plugin');
//提取CSS为单独文件  npm i mini-css-extract-plugin -D或者cnpm i mini-css-extract-plugin -D
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//压缩CSS npm i optimize-css-assets-webpack-plugin -D或者cnpm i optimize-css-assets-webpack-plugin -D
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
//去除没有用到的CSS 需要的node
const glob = require('glob');
const PATHS = { src: join(__dirname, 'src')}
const PurgecssPlugin = require('purgecss-webpack-plugin');


module.exports = {
/**
 * 1、entry
 *  入口（entry）指示webpack以哪个文件作为入口起点开始打包，分析构建内部依赖图
 */
// entry: './src/index2.js',
    entry: ['./src/index2.js','./src/index2.html'],//开发环境优化：模块热替换 html部分  只变化html变化部分
    /**
 * 2、output
 *  输出（output）指示webpack打包后的资源 bundles 输出到哪里，以及如何命名。
 */
    output: {
        filename: "[name].js",
        path: resolve(__dirname,'build')
    },

 /**
 * 3、loader
 *  loader让webpack能够去处理那些非JavaScript资源css、img等，将它们处理成webpack能够识别的资源，可以理解成一个翻译过程（webpack自身只能理解js和json）。
 */
    module:  {
        rules:[
            // {test:/\.css$/,use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']},//use的使用顺序，从右到左 从上到下
            //优化模块热替换 css部分  只变化css变化部分
            // {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']},//use的使用顺序，从右到左 从上到下
            {test:/\.css$/,use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']},
            {test:/\.less$/,use:[MiniCssExtractPlugin.loader,'css-loader','less-loader','postcss-loader']},//use的使用顺序，从右到左 从上到下
            {test:/\.scss$/,use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader','postcss-loader']},//use的使用顺序，从右到左 从上到下
            //打包图片资源  css背景图片 npm i url-loader file-loader -D或 cnpm i url-loader file-loader -D
            {
                test:/\.(png|jpg|jpeg|gif)$/,
                loader: 'url-loader',
                options: {
                    publicPath : './images/',//指定公共路径
                    outputPath : 'images/',//指定输出路径
                    limit : 1024 * 22,//图片中最小的是22kb 表示大于22KB文件才会重命名并编译不会使用base64位 小于22kb的文件会被编译成成base64的
                    /**
                     * 默认名称[hash].[ext]
                     * 如果想指定格式png命名 [hash].png
                     * 如果想保留原名编译 [name].[ext]
                     * [name][hash].[ext]执行结果和[hash].[ext] 是一样的
                     * 如果觉得hash命名太长 [hash:10].[ext]
                     */
                    name:'[hash:10].[ext]'
                }
            },
            //打包图片资源 html中的图片 npm i html-loader -D 或cnpm i html-loader -D
            //使用yarn
            {
                test : /\.html$/,
                loader: 'html-loader',
                //解决无法加载的原因
                options: {
                    esModule : false
                }
            },
            //打包其它资源  打包字体资源
            {
                exclude: /\.(js|json|html|css|less|scss|png|gif|jpeg|jpg)$/,//排除这些
                loader: 'file-loader',
                options: {
                    outputPath: 'font/',//指定输出路径
                    publicPath: './font',
                    name: '[name][hash:10].[ext]'
                }
            },
            {
                //eslint只检查js语法
                test : /\.js$/,
                //只检查自己的代码，不检查第三方库的代码
                exclude: /node_modules/,
                loader: 'eslint-loader',
                options: {
                    fix:true
                }

            }
        ]
    },

 /**
 * 4、plugins
 *  插件（plugins）可用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
 */
    plugins: [

        new HtmlWebpackPlugin({
            template: "./src/index2.html",
            filename: "index.html",
        }),
        //提取CSS为单独文件
        new MiniCssExtractPlugin({
            filename: 'style.css'
        }),
        //压缩CSS
        new OptimizeCssAssetsWebpackPlugin(),
        //去除没有用到的CSS
        new PurgecssPlugin({
             paths: glob.sync(`${PATHS.src}/**/*`,  { nodir: true }),
         }),


 ],
//在webpack5 需要加上这个配置项才可以自动刷新配置项
    target: "web",
    /**
 * 5、mode
 *  模式（mode）指示webpack使用相应模式的配置。
 *  开发模式（development）：配置比较简单，能让代码本地调试运行的环境。
 *  生产模式（production）：代码需要不断优化达到性能最好。能让代码优化上线运行的环境。
 *  都会自动启用一些插件，生产模式使用插件更多
 */
// mode: "development"
    /**
     * 开发服务器devServer配置
     * 安装：   yarn add webpack-dev-server --dev
     * 启动：   webpack serve
     * 修改端口（默认是localhost:8080）     webpack serve --port 3003
     * 修改配置项后 都得重启才能生效
     *  在package.json的scripts和这里都可以配置
     *  使用时 npm run dev（开发）
     *  或者npm run dev build（生产）
     */

    devServer: {
        port:3000,//端口号
        compress:true,//自动编译
        open:true,//自动打开浏览器
        hot:true//开启模块热替换
    }
}